<template>
  <div class="bookMsg">
    <div class="book">
      <ul class="infinite-list">
        <li class="infinite-list-item">
          <el-row :gutter="20" >
            <el-col :span="6" v-for="book of bookLists " :key="book.id">
              <div class="grid-content bg-purple">
                <div class="book1" @click="toDetail(book.id)">
                  <img class="img1" :src="test(book.img_src)" alt="">
                </div>
                <p>
                </p>
                <div class="referral">
                  <p>
                    {{ book.name }}
                  </p>
                </div>
                <i class="el-icon-star-on" v-for="count in 5 " :key="count"></i>

                <div class="price" style="padding: 0px 10px">
                  <i>&yen</i>
                  <strong>{{ book.price }}</strong>
                  <button @click="toDetail()">购买</button>
                </div>
              </div>
            </el-col>

            <el-col :span="6">


            </el-col>
            <el-col :span="6">


            </el-col>
            <el-col :span="6">

            </el-col>
          </el-row>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {getAllBook} from "@/api";
import getImg from "@/utils/getImg";

export default {
  name: "PageOne",
  data() {
    return {
      count: 0,
      bookLists:[],
    }
  },
  mounted() {
    getAllBook().then(res => {
      this.bookLists = res.data.data
      console.log(this.bookLists)
    })
  },
  methods: {
    toDetail(id){
      this.$router.push({
        name:'detail',
        query:{
          id:id,
          bookLists :this.bookLists
        }
      })
    },
    test(tt){
       return getImg(tt)
    }
  },
  }

</script>

<style scoped lang="less">
.bookMsg {
  height: 200%;

  .book {

  }

  .book1 {
    margin: 15px auto;
    padding: 50px;
    background: #f4f4f5;

  }

  .img1 {
    width: 100%;
    height: 74px;
    border-radius: 5px;
  }

  .referral {
    display: flex;

    p {
      flex: 1;
      //text-align: right;
      font-size: 14px;
      //设置数据省略号
      //white-space: nowrap;
      //overflow: hidden;
      //text-overflow: ellipsis;
      margin-left: 10px;
    }
  }

  .el-icon-star-on {
    color: orange;
    padding: 5px;
  }
}

.price {
  display: flex;
  //justify-content: space-between;
  margin-top: 10px;
  color: red;

  i {
    font-style: normal;
    font-size: 20px;
  }

  strong {
    font-size: 20px;
    margin-left: 5px;
  }

  button {
    width: 50px;
    margin-left: auto;
    cursor: pointer;
    background: red;
    color: white;
    border-radius: 5px;
  }
}

.el-col {
  :hover {
    cursor: pointer;
  }
}
</style>